<template>
  <section class='f-phone-recharge-detail'>
    <img style="width:100%" src="@/assets/imgs/jhh_pic_recharge.png" alt="">

    <div class="f-text">
      <p>话费充值二维码</p>
      <p class="f-animation">︾</p>
    </div>

    <section class="f-qrcode">
      <img style="width:165px;height:165px" :src="form.rechargeQr" alt="">
    </section>

    <div class="f-center f-mt-20">
      <van-button round type="primary" class="f-pl-30 f-pr-30" @click="saveImg(form.rechargeQr)">保存二维码至本机</van-button>
    </div>

    <div class="f-tips f-pb-30">
      <p>温馨提示：</p>
      <p>1.请使用另外一台手机的微信扫码打开开卡链接。</p>
      <p>2.点击上方“保存二维码至本机”，将二维码保存至手机相册，然后通过微信扫一扫选择相册中保存的二维码进行识别。</p>
    </div>

    <div class="f-center f-mb-20" v-if="form.rechargeProcess">
      <a style="font-size: 14px;" @click="toFlow">查看详细充值流程 > ></a>
    </div>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import QrcodeVue from 'qrcode.vue'
import api from '../api'
import JsBridge from '@/utils/JsBridge.js'
import { showLoadingToast, closeToast, showToast } from 'vant';
import { successDeal } from '@/utils/utils';

export default {
  components: { QrcodeVue },

  setup(props, context) {
    const store = useStore()
    const router = useRouter()

    const route = useRoute();

    const state = reactive({
      form: {},
      shopId: "",
      type: "",
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '话费充值引导',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      state.shopId = route.query.shopId
      state.type = route.query.type
      if (state.type == 1) {
        getShopInfo()
      } else {
        getGuideInfo(state.shopId)
      }
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.form = res.data
      })
    }

    const getGuideInfo = (shopId) => {
      let json = {
        shopId
      }
      api.shopGuideInfo(json).then(res => {
        state.form = res.data
      })
    }

    const toFlow = () => {
      router.push({
        path: "/index/phoneRecharge/flow",
        query: {
          shopId: state.shopId,
          type: state.type
        }
      })
    }

    const saveImg = (fileUrl) => {
      showLoadingToast({
        message: '保存中...',
        forbidClick: true,
        duration: 0,
      });

      JsBridge.callHandler('checkPermissions', 'android.permission.WRITE_EXTERNAL_STORAGE', (res) => {
        const obj = JSON.parse(res)
        const { result } = obj
        if (!result) {

          JsBridge.callHandler('saveFile', { fileUrl }, (res) => {
            successDeal('保存成功，请前往相册查看！')
          })
        } else {
          showToast('该功能需要访问您的相册，请打开权限')
          setTimeout(() => {
            JsBridge.callHandler('requestPermissions', 'android.permission.WRITE_EXTERNAL_STORAGE', (res) => {
              console.log(res)
            })
          }, 500);
        }
      })
    }

    return {
      ...toRefs(state),
      toFlow,
      saveImg
    }
  }
}
</script>
<style lang='scss' scoped>
.f-phone-recharge-detail {
  background: #ffffff !important;
  .f-text {
    font-size: 24px;
    color: #266ef2;
    text-align: center;
    margin-top: 32px;
  }
  .f-animation {
    animation: move 0.5s infinite alternate; /*infinite无限循环，alternate动画反向执行回到起点*/
  }
  .f-qrcode {
    text-align: center;
  }
  .f-tips {
    font-size: 12px;
    color: #424242;
    padding-left: 35px;
    padding-right: 10px;
    margin-top: 19px;
  }

  @keyframes move {
    from {
      transform: translateY(0) rotate(0);
    }
    to {
      transform: translateY(10px);
    }
  }
}
</style>